<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>
    <script src="../lib/jquery-1.10.2.min.js"></script>
    <script src="../dist/tinyselect.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../dist/tinyselect.min.css"/>
    <link rel="stylesheet" type="text/css" href="misc/css/example.css"/>
    <link rel="stylesheet" type="text/css" href="../lib/codemirror/codemirror.css"/>
    <script src="../lib/codemirror/codemirror.js"></script>
    <script src="../lib/codemirror/mode/javascript/javascript.js"></script>
    <script src="../lib/codemirror/mode/xml/xml.js"></script>
    <script src="../lib/codemirror/mode/htmlmixed/htmlmixed.js"></script>
    <script src="../lib/codemirror/mode/css/css.js"></script>
</head>

<body>
<div class="tinyselectcontext-container">
    <div id="tinyselectcontext"></div>
</div>
<script src="misc/js/source.js"></script>
<script>
    $.getJSON('misc/data/groupdata.json').then(function (data) {
        tinyselect('#tinyselectcontext', {
            box: {
                layout: 'table',
                columns: [{
                    type: 'index',
                    width: 40
                }, {
                    field: 'id',
                    width: 120,
                    render: function(e){
                        return '这是' + e.value + '月，哈哈哈哈哈哈哈哈中';
                    }
                }, {
                    field: 'text',
                    width: 200
                }, {
                    type: 'status',
                    width: 40
                }]
            },
            item: {
                data: data,
                visible: 5
            },
            group:{
                valueField: 'group'
            }
        });
    });
</script>
</body>

</html>